<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../../css/mui.min.css" rel="stylesheet" type="text/css" />
		<script src="../../js/mui.min.js" type="text/javascript"></script>
		<script src="../../js/vue.min.js" type="text/javascript"></script>
		<script src="../../js/us/URL.js" type="text/javascript"></script>
		<script src="../../js/us/showPic.js" type="text/javascript"></script>
		<script src="../../js/us/showText.js" type="text/javascript"></script>
		<title>线路页面</title>
		<style type="text/css">
			img.lunbo{height: 200px;}
		</style>
	</head>
	<body>
		<!--header s-->
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">线路</h1>
		</header>
		<!--header e-->
		<!--主内容区     s-->
		<div class="mui-content" id="news">
			<!--轮播图      start-->
			<div id="slider" class="mui-slider" >
			  <div class="mui-slider-group mui-slider-loop">
			    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			    <div class="mui-slider-item mui-slider-item-duplicate">
			      <a href="#">
			        <img  id="lastNode" class="lunbo">
			      </a>
			    </div>
			    <!-- 第一张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img   class="pic lunbo">
			      </a>
			    </div>
			    <!-- 第二张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img   class="pic lunbo">
			      </a>
			    </div>
			    <!-- 第三张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img   class="pic lunbo">
			      </a>
			    </div>
			    <!-- 第四张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img   class="pic lunbo">
			      </a>
			    </div>
			    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			    <div class="mui-slider-item mui-slider-item-duplicate">
			      <a href="#">
			        <img  id="fistNode" class="lunbo">
			      </a>
			    </div>
			  </div>
			  <div class="mui-slider-indicator">
			    <div class="mui-indicator mui-active"></div>
			    <div class="mui-indicator"></div>
			    <div class="mui-indicator"></div>
			    <div class="mui-indicator"></div>
			  </div>
			</div>
			<!--轮播图      end-->
			<!--线路列表   s-->
			<div  class="myPreloadList">
				<ul class="mui-table-view mui-grid-view" id="list">
					<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in items">
						<a href="javascript:;" data-guid="item.guid" style="padding-left: 0px;margin-left: 4px;">
							<img class="mui-media-object" :src="item.litpic" style="position: relative;">
							<div class="mui-media-body mui-ellipsis-2 "  style="position: absolute;left: 0px;bottom: 0px;color: #fff;font-weight: bolder;background-color: rgba(0,0,0,.5);height: 30px;line-height: 30px;">{{item.title}}</div>
							<span class="storeprice_z"  style="display: none;">{{item.storeprice}}</span><i style="font-style: normal;visibility: hidden;">元/人</i>
						    <span class="test_id" style="display: none;">{{item.id}}</span>
						</a>
					</li>
				</ul>
			</div>
			<!--线路列表  e-->
		</div>
		<!--主内容区     e-->
	</body>

</html>
		<script type="text/javascript">
			var lastId = ''; //最新新闻的id
			var webview_detail = null; //详情页webview
			var webview_order=null;
			var titleNView = { //详情页原生导航配置
				backgroundColor: '#f7f7f7', //导航栏背景色
				titleText: '', //导航栏标题
				titleColor: '#000000', //文字颜色
				type: 'transparent', //透明渐变样式
				autoBackButton: true, //自动绘制返回箭头
				splitLine: { //底部分割线
					color: '#cccccc'
				}
			}
			//mui初始化，配置下拉刷新
			mui.init({
				pullRefresh: {
					container: '#list',
					down: {
						style: 'circle',
						offset: '44px',
						auto: true,
						callback: pulldownRefresh
				         },
				}
			});

			mui.plusReady(function() {
				//预加载详情页
				webview_detail = mui.preload({
					url: 'detail.html',
					id: 'news_detail',
					styles: {
						"render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
						"titleNView": titleNView
							   }
				});
			});
                //预加载订单页面  s
            mui.plusReady(function(){
                webview_order=mui.preload({
	                url :'order.html',
	                styles:{
	                    "render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
	                      	}
                });
            });
                //预加载订单页面   e
           		//下拉请求:
           function pulldownRefresh(){
           	if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
				plus.nativeUI.toast('似乎已断开与互联网的连接', {
					verticalAlign: 'top'
				});
				return;
			}
           	//需要的字段名
			var data = {
				column: "id,post_id,title,author_name,litpic,published_at,storeprice" //需要的字段名
					   }
			if(lastId) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
				data.lastId = lastId;
				data.time = new Date().getTime() + "";
			}
			//轮播区域数据请求
            mui.getJSON(pageUrl.xianlu, data, function(rsp) {
                var picList=mui(".pic");
                var l=picList.length;//展示的图片的个数
                var aa=new Array();
                for(var i=0;i<rsp.length;i++){
                      aa.push(rsp[i].litpic);
                 	}
                //额外增加的一个节点(循环轮播：第一个节点是最后一张轮播)
                mui('#lastNode').src=aa[l-1];
                //最后一个节点是第一张图片轮播
                mui('#fistNode').src=aa[0];
                showPic.picList(picList,aa);
            });
			//列表区域数据请求
			mui.getJSON(pageUrl.xianlu, data, function(rsp) {
				mui('#list').pullRefresh().endPulldown();
				    if(rsp && rsp.length > 0) {
						lastId = rsp[0].id; //保存最新消息的id，方便下拉刷新时使用
						news.items = news.items.concat(convert(rsp));
						console.log(news.items+"zz");
					}
				});
          }
           //新建vue
			var news = new Vue({
				el: '#news',
				data: {
					banner: {}, //顶部banner数据
					items: [] //列表信息流数据
				}
			});
		   //点击列表，打开详情
		   //TODO 后续应该封装一个v-tap指令，实现tap监听
			mui('.mui-content').on('tap', '[data-guid]', function() {
				var guid = this.getAttribute('data-guid');
				var title = this.querySelector(".mui-ellipsis-2").innerHTML.trim();
				var litpic = this.querySelector("img").getAttribute("src");
				var storeprice=this.querySelector(".storeprice_z").innerHTML;
				var id=this.querySelector(".test_id").innerHTML;
				open_detail(guid, title, litpic,storeprice,id);
			});

			/**
			 * 打开新闻详情
			 * @param {String} guid 新闻ID
			 * @param {String} title  新闻标题
			 */
			function open_detail(guid, title, litpic,storeprice,id) {
			//若详情页尚未预加载完成，则延时等待再执行
				if(!webview_detail) {
					setTimeout(function() {
						open_detail(guid);
					}, 100);
				}
			//触发子窗口变更新闻详情
			mui.fire(webview_detail, 'get_detail', {
				guid: guid,
				title: title,
				litpic: litpic,
				storeprice:storeprice,
				id:id
			});
			//更改详情页原生导航条信息
			titleNView.titleText = title;
			webview_detail.setStyle({
				"titleNView": titleNView
			});
			setTimeout(function() {
				webview_detail.show("slide-in-right", 300);
				}, 150);
			}
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						guid: item.post_id,
						title: item.title,
						litpic: item.litpic,
						storeprice:item.storeprice,
						id:item.id
					});
				});
				return newItems;
			}

			/**
			 * 格式化时间的辅助类，将一个时间转换成x小时前、y天前等
			 */
			var dateUtils = {
				UNITS: {
					'年': 31557600000,
					'月': 2629800000,
					'天': 86400000,
					'小时': 3600000,
					'分钟': 60000,
					'秒': 1000
				},
				humanize: function(milliseconds) {
					var humanize = '';
					mui.each(this.UNITS, function(unit, value) {
						if(milliseconds >= value) {
							humanize = Math.floor(milliseconds / value) + unit + '前';
							return false;
						}
						return true;
					});
					return humanize || '刚刚';
				},
				format: function(dateStr) {
					var date = this.parse(dateStr)
					var diff = Date.now() - date.getTime();
					if(diff < this.UNITS['天']) {
						return this.humanize(diff);
					}

					var _format = function(number) {
						return(number < 10 ? ('0' + number) : number);
					};
					return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' + _format(date.getHours()) + ':' + _format(date.getMinutes());
				},
				parse: function(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
					var a = str.split(/[^0-9]/);
					return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
				}
			};
		</script>